<template>
  <div class="index">
    <!-- 顶部栏 -->
    <div class="site-nav">
      <div class="sn-bd">
        <p class="sn-welcome-p">
          <span class="sn-welcome">欢迎来ShopK开源商城</span>
        </p>
        <ul class="sn-menu">
          <li class="sn-login"><nuxt-link to="/">请登录</nuxt-link></li>
          <li class="sn-register"><nuxt-link to="/">免费注册</nuxt-link></li>
          <li class="sn-order"><nuxt-link to="/">我的订单</nuxt-link></li>
          <li class="sn-my"><nuxt-link to="/">我的账户</nuxt-link></li>
          <li class="sn-map sn-down">
            网站导航
            <i class="iconfont sn-down-icon">&#xe61d;</i>
          </li>
          <li class="sn-service sn-down">
            <i class="iconfont sn-service-icon">&#xe626;</i>
            客户服务
            <i class="iconfont sn-down-icon">&#xe61d;</i>
          </li>
        </ul>
      </div>
    </div>
    <div class="header">
      <div class="header-search">
        <div class="logo">
          <h1><nuxt-link to="/" title="shopk商城">shopk商城</nuxt-link></h1>
          <nuxt-link to="/">
            <img src="~assets/img/index/shopk_big.png" alt="shopk商城" width="100%">
          </nuxt-link>
        </div>
        <div class="search-div">
          <div class="search">
            <form class="search-form" name="search-top" action="//localhost">
              <fieldset>
                <legend>shopk搜索</legend>
                <div class="search-input-div">
                  <input type="text" name="search-input" class="search-input">
                  <button>搜索</button>
                </div>
              </fieldset>
            </form>
            <div class="search-tag">
              <nuxt-link to="/">java设计模式</nuxt-link>
              <nuxt-link to="/">java设计模式</nuxt-link>
              <nuxt-link to="/">java设计模式</nuxt-link>
              <nuxt-link to="/">java设计模式</nuxt-link>
              <nuxt-link to="/">java设计模式</nuxt-link>
              <nuxt-link to="/">java设计模式</nuxt-link>
            </div>
          </div>
          <div class="header-cart">
            <i class="iconfont">&#xe61a;</i>
            购物车(99+)
          </div>
        </div>
      </div>
      <div class="header-nav-div">
        <div class="header-nav-type">
          <i class="iconfont">&#xe625;</i>
          <h2><span>全部商品分类</span></h2>
        </div>
        <div class="header-nav">
          <ul>
            <li><nuxt-link to="/">网络文学</nuxt-link></li>
            <li><nuxt-link to="/">近代文明史</nuxt-link></li>
            <li><nuxt-link to="/">宇宙学</nuxt-link></li>
            <li><nuxt-link to="/">课本散文</nuxt-link></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="content">
      <!-- 幻灯片+分类列表 -->
      <div class="cate">
        <div class="cate-con">
          <ul>
            <li>
              <p>
                <nuxt-link to="/">手机</nuxt-link>
                <span>/</span>
                <nuxt-link to="/">运营商</nuxt-link>
                <span>/</span>
                <nuxt-link to="/">数码</nuxt-link>
              </p>
             
            </li>
            <li>
              <nuxt-link to="/">手机</nuxt-link>
              <span>/</span>
              <nuxt-link to="/">运营商</nuxt-link>
              <span>/</span>
              <nuxt-link to="/">数码</nuxt-link>
            </li>
            <li>
              <nuxt-link to="/">手机</nuxt-link>
              <span>/</span>
              <nuxt-link to="/">运营商</nuxt-link>
              <span>/</span>
              <nuxt-link to="/">数码</nuxt-link>
            </li>
            <li>
              <nuxt-link to="/">手机</nuxt-link>
              <span>/</span>
              <nuxt-link to="/">运营商</nuxt-link>
              <span>/</span>
              <nuxt-link to="/">数码</nuxt-link>
            </li>
            <li>
              <nuxt-link to="/">手机</nuxt-link>
              <span>/</span>
              <nuxt-link to="/">运营商</nuxt-link>
              <span>/</span>
              <nuxt-link to="/">数码</nuxt-link>
            </li>
          </ul>
          <div class="cate-list" style="display:none;">
            <dl class="cate-line">
              <dt class="cate-title">客厅家具 <i class="iconfont">&#xe68c;</i></dt>
              <dd class="cate-line-con">
                <nuxt-link to="/">数码</nuxt-link>
                <nuxt-link to="/">数码</nuxt-link>
                <nuxt-link to="/">数码</nuxt-link>
                <nuxt-link to="/">数码</nuxt-link>
                <nuxt-link to="/">数码</nuxt-link>
                <nuxt-link to="/">数码</nuxt-link>
                <nuxt-link to="/">数码</nuxt-link>
                <nuxt-link to="/">数码</nuxt-link>
                <nuxt-link to="/">数码</nuxt-link>
                <nuxt-link to="/">数码</nuxt-link>
                <nuxt-link to="/">数码</nuxt-link>
                <nuxt-link to="/">数码</nuxt-link>
                <nuxt-link to="/">数码</nuxt-link>
                <nuxt-link to="/">数码</nuxt-link>
                <nuxt-link to="/">数码</nuxt-link>
                <nuxt-link to="/">数码</nuxt-link>
              </dd>
            </dl>
             <dl class="cate-line">
              <dt class="cate-title">客厅家具 <i class="iconfont">&#xe68c;</i></dt>
              <dd class="cate-line-con">
                <nuxt-link to="/">数码</nuxt-link>
                <nuxt-link to="/">数码</nuxt-link>
                <nuxt-link to="/">数码</nuxt-link>
                <nuxt-link to="/">数码</nuxt-link>
                <nuxt-link to="/">数码</nuxt-link>
                <nuxt-link to="/">数码</nuxt-link>
                <nuxt-link to="/">数码</nuxt-link>
                <nuxt-link to="/">数码</nuxt-link>
              </dd>
            </dl>
          </div>
        </div>
        <!-- 幻灯片 -->
        <div class="banner">
          <a-carousel arrows autoplay>
            <div slot="prevArrow" class="custom-slick-arrow" style="left: 10px;zIndex: 1">
              <a-icon type="left-circle" />
            </div>
            <div slot="nextArrow" class="custom-slick-arrow" style="right: 10px">
              <a-icon type="right-circle" />
            </div>
            <div><img src="~assets/img/index/banner1.jpg" alt="" width="100%"></div>
            <div><img src="~assets/img/index/banner2.jpg" alt="" width="100%"></div>
            <div><h3>3</h3></div>
            <div><h3>4</h3></div>
          </a-carousel>
        </div>
        <!-- 广告位 -->
        <div class="banner-ad">
          <div class="banner-ad-top">
            <img src="~assets/img/index/ad-top.png" alt="" width="200px">
          </div>
          <div class="banner-ad-bottom">
            <img src="~assets/img/index/ad-top.png" alt="" width="200px">
          </div>
        </div>
      </div>
      <!-- 广告位 -->
      <div class="con-ad">
        <nuxt-link to="/">
          <img src="http://image31.bookschina.com/pro-images/newtejia/292120.jpg" alt="">
        </nuxt-link>
        <nuxt-link to="/">
          <img src="http://image31.bookschina.com/pro-images/newtejia/292120.jpg" alt="">
        </nuxt-link>
        <nuxt-link to="/">
          <img src="http://image31.bookschina.com/pro-images/newtejia/292120.jpg" alt="">
        </nuxt-link>
        <nuxt-link to="/">
          <img src="http://image31.bookschina.com/pro-images/newtejia/292120.jpg" alt="">
        </nuxt-link>
      </div>
      <!-- 秒杀专区 -->
      <div class="seckill">
        <div class="sk-top">
          <div class="sk-h3"><h3>秒<span>杀</span>专区</h3><i class="iconfont">&#xe60a;</i></div>
        </div>
        <div class="sk-list">
          <div class="sk-item">
            <div class="sk-img">
              <img src="http://image31.bookschina.com/pro-images/newtejia/292120.jpg" alt="">
            </div>
            <div class="sk-title">商品1</div>
            <div class="sk-price">
              <span>￥127.00</span>
              <span>999.00</span>
            </div>
          </div>
        </div>
      </div>
      <div class="floor">
        <div class="sk-top">
          <div class="sk-h3"><h3>秒杀专区</h3></div>
        </div>
        <div class="sk-list">
          <div class="sk-item">
            <div class="sk-img">
              <img src="http://image31.bookschina.com/pro-images/newtejia/292120.jpg" alt="">
            </div>
            <div class="sk-title">分类一</div>
            <div class="sk-price">
              <span>￥127.00</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">

    </div>
  </div>
</template>
<style  lang="less">
.index{
  .ant-carousel{
    height:400px;
  }
  .ant-carousel .slick-slider{
    text-align: center;
    height: 400px !important;
    line-height: 400px;
    background: #364d79;
    overflow: hidden;
  }

  .ant-carousel .custom-slick-arrow {
    width: 25px;
    height: 25px;
    font-size: 25px;
    color: #fff;
    background-color: rgba(31, 45, 61, 0.11);
    opacity: 0.3;
  }
  .ant-carousel .custom-slick-arrow:before {
    display: none;
  }
  .ant-carousel .custom-slick-arrow:hover {
    opacity: 0.5;
  }

  .ant-carousel .slick-slide h3 {
    color: #fff;
  }
}
</style> 
<style lang="less" scoped>
  @main-color: #7f968e;
  @light-color: #5fb898;
  @slight-color: #e3eeea;
  @font-color: rgba(0, 0, 0, 0.65);
  @dark-color: #1e3030;
  .site-nav{
    width: auto;
    overflow: hidden;
    height: 26px;
    line-height: 26px;
    position: relative!important;
    background: #f2f2f2;
    z-index: 99999;
    border-bottom: 1px solid #e5e5e5;
    font-size: 12px;
    .sn-bd{
      width: 1200px;
      margin: auto;
      .sn-welcome-p{
        float: left;
        width: 400px;
        .sn-welcome{
          margin-right:15px;
        }
      }
      .sn-menu{
        float: right;
        width: auto;
        li{
          float: left;
          padding: 0 10px;
          margin:0 5px;
          position: relative;
          a{
            color: @font-color;
          }
          &:last-child{
            &:after{
              width:0;
            }
          }
          &::after{
            position: absolute;
            width: 1px;
            height:10px;
            margin-top:8px;
            background: #ccc;
            content:'';
            right:-5px;
          }
          a:hover{
            color:@light-color !important;
          }
        }
        .sn-service{
          .sn-service-icon{
            font-size:10px !important; 
          }
        }
        .sn-down-icon{
          transition: transform .3s;
          font-size:10px;
          transform: rotate(0deg);
          display: inline-block;
          color: @font-color;
        }
        .sn-map:hover,.sn-service:hover{
          background:white;
          color:@light-color !important;
          .sn-down-icon{
            transform: rotate(180deg);
          }
        }
      }
    }
  }
  .header{
    width:100%;
    height:157px;
    border-bottom:2px solid @main-color;
    // background:#ccc;
    .header-search{
      height:115px;
      width:1200px;
      margin:0 auto;
      background:white;
      .logo{
        width: 200px;
        height: 115px;
        float: left;
        padding-top:30px;
        h1{
          display: none;
        }
        img{
          width: 200px;
          height: 62px;
        }
      }
      .search-div{
        width:650px;
        height:115px;
        padding-top:30px;
        float: left;
        margin-left:120px;
        .search{
          float:left;
          width:500px;
          height:70px;
          .search-form{
            width:500px;
            height:40px;
            border:2px solid @main-color;
            legend{
              display: none;
            }
            .search-input-div{
              width:100%;
              height:36px;
              input{
                width:396px;
                float:left;
                height:36px;
                padding:0 5px;
              }
              button{
                width:100px;
                height:36px;
                float:right;
                font-size:14px;
                background:@main-color;
                color:white;
                cursor: pointer;
              }
            }
          }
          .search-tag{
            width:100%;
            height:30px;
            line-height:30px;
            overflow: hidden;
            a{
              float:left;
              color:@font-color;
              margin-right:10px;
              &:hover{
                color: @light-color;
              }
            }

          }
        }
        .header-cart{
          width:120px;
          height:40px;
          border:2px solid @slight-color;
          float:right;
          line-height:34px;
          text-align: center;
          cursor: pointer;
          i{
            font-size:18px;
          }
        }
      }
    }
    .header-nav-div{
      width:1200px;
      height: 40px;
      margin:0 auto;
      .header-nav-type{
        position: relative;
        width: 200px;
        height: 40px;
        line-height:40px;
        color:white;
        background:@main-color;
        font-size:16px;
        padding-left:40px;
        text-align: left;
        float:left;
        cursor: pointer;
        i{
          position: absolute;
          font-size:22px;
          line-height:40px;
          left:10px;
        }
        h2{
          color:white;
          font-size:16px;
          height: 40px;
          line-height:40px;
          margin:0;
        }
      }
      .header-nav{
        float:left;
        margin-left:20px;
        ul{
          li{
            padding:0 15px;
            height:40px;
            line-height:40px;
            float:left;
            font-size:16px;
            a{
              color:@dark-color;
              &:hover{
                color: @light-color;
              }
            }
          }
        }
      }
    }
  }
  .content{
    width:1200px;
    height:auto;
    margin:0 auto;
    .cate{
      width:1200px;
      height:400px;
      .cate-con{
        position: relative;
        padding-top:5px;
        width:200px;
        height:400px;
        float:left;
        border:1px solid @main-color;
        border-top:0;
        ul{
          margin-left:0;
          li{
            font-size:14px;
            height:30px;
            line-height:30px;
            padding-left:10px;
            background:white;
            position: relative;
            z-index: 2;
            transition: font-size .3s;
            &:hover{
              line-height:26px;
              border:2px solid @main-color;
              border-right:none;
              width:202px;
              margin-left:-2px;
              font-size:15px;
            }
            a{
              color: @dark-color;
              position: relative;
              &:hover{
                color: @light-color;
              }
              &:first-child{
                padding-left:0;
              }
            }
            
          }
        }
        .cate-list{
          width:700px;
          height:400px;
          position: absolute;
          left:198px;
          border:2px solid @main-color;
          border-top:none;
          top: 0;
          padding-left:30px;
          padding-top:10px;
          .cate-line{
            width:100%;
            height:auto;
            overflow: hidden;
            .cate-title{
              width:80px;
              height:40px;
              line-height:40px;
              text-align: left;
              font-size: 14px;
              color: @dark-color;
              float:left;
              font-weight: bold;
              i{
                font-size:14px;
                font-weight: 200;
              }
            }
            .cate-line-con{
              min-height:40px;
              padding:10px;
              width:500px;
              float:left;
              margin-left:20px;
              height:auto;
              border-bottom:2px dotted @slight-color;
              a{
                height:20px;
                float:left;
                margin-left:10px;
                color: @font-color;
                &:hover{
                  color:@light-color;
                }
              }
            }
          }
        }
      }
      .banner{
        width:800px;
        height:400px;
        float:left;
        background:#ccc;
      }
      .banner-ad{
        width:200px;
        height:400px;
        float:left;
      }
    }
    .con-ad{
      width:100%;
      height:120px;
      display: flex;
      margin-top:10px;
      a{
        width:25%;
        margin-right:10px;
        float:left;
        &:last-child{
          margin-right:0;
        }
        img{
          width:100%;
        }
      }
      
    }
    .seckill,.floor{
      width:100%;
      height:310px;
      margin-top:10px;
      .sk-top{
        width:100%;
        height:50px;
        .sk-h3{
          width:200px;
          float:left;
          height:50px;
          line-height:50px;
          text-align: left;
          font-size:20px;
          color:black;
          h3{
            display: inline-block;
          }
          i{
            font-size:18px;
            margin-left:5px;
          }
          span{
            color:@main-color;
          }
        }
      }
      .sk-list{
        width:100%;
        height:270px;
        border:1px solid @slight-color;
        border-top:2px solid black;
        .sk-item{
          width:200px;
          height:100%;
          border-right:1px solid @slight-color;
          .sk-img{
            padding-top:10px;
            width:150px;
            height:210px;
            margin:0 auto;
            img{
              width: 100%;
              height: 100%;
            }
          }
          .sk-title{
            width:100%;
            height:30px;
            text-align: center;
            line-height:30px;
            padding:0 10px;
            font-size:16px;
            color:@dark-color;
          }
          .sk-price{
            width:100%;
            height:20px;
            line-height:20px;
            padding:0 10px;
            text-align: center;
            span{
              margin-right:10x;
              color:@light-color;
              font-size:16px;
              &:nth-child(2){
                margin-right:0;
                font-size:12px;
                color:@font-color;
                text-decoration:line-through;
              }
            }
          }
        }
      }
    }
    .floor{
      margin-top:20px;
      .sk-top{
        position: relative;
        padding-left:15px;
        &::after{
          width:5px;
          height:20px;
          content:'';
          position: absolute;
          left:0;
          background:@dark-color;
          top:15px;
        }
      }
      .sk-list{
        border:none;
        .sk-item{
          border:1px solid #eee;
          &:hover{
            box-shadow: 0px 0px 4px 0px @light-color;
          }
        }
      }
    }
  }
  .footer{
    width:100%;
    height:300px;
    background:black;
    margin-top:50px;
  }
</style>
